<script setup lang="ts">
import { ref, defineEmits, watch, onMounted, nextTick } from 'vue';
import { useBooleanStore } from '@/store';
import { queryAOList, queryDeliveryTask } from '@/api/les';
import { Notification } from '@arco-design/web-vue';

const emit = defineEmits(['updateArray','updateDetailArray']);
const booleanStore = useBooleanStore();
// 表单查询数据
const toolCode = ref('');
const aoCode = ref('');
const station = ref('');
// 获取昨天天的日期
const yesterday = new Date();
yesterday.setDate(yesterday.getDate());
// 获取今天的日期
const today = new Date();

const startTime = ref(yesterday.toISOString().split('T')[0]);
const endTime = ref(today.toISOString().split('T')[0]);
const pageSize = ref(10);
const pageNumber = ref(1);
const detailPageSize = ref(10);
const detailPageNumber = ref(1);

// 查询配送任务
async function startPlanByToolCode() {
  const data = await queryDeliveryTask({
    startTime: startTime.value,
    endTime: endTime.value,
    current: detailPageNumber.value,
    size: detailPageSize.value,
  });
  if (data.retCode === '200') {
    Notification.success({
      title: '成功',
      content: data.message,
      closable: true,
    });
    emit('updateDetailArray', data);
  } else {
    Notification.error({
      title: '失败',
      content: data.message,
      closable: true,
    });
  }
}

// 表格数据
async function handleSearch() {
  await nextTick();
  const newData = await queryAOList({
    current: pageNumber.value,
    size: pageSize.value,
    aoCode: aoCode.value,
    station: station.value,
    toolCode: toolCode.value,
    startTime: startTime.value,
    endTime: endTime.value,
  });
  newData.responseBody.records = newData.responseBody.records.map((item: any, index: any) => ({
    ...item,
    id: `${pageNumber.value}${pageSize.value}${index}`, // 生成一个唯一的 id
  }));
  const newDetail = await queryDeliveryTask({
    startTime: startTime.value,
    endTime: endTime.value,
    current: detailPageNumber.value,
    size: detailPageSize.value,
  });
  emit('updateArray', newData);
  emit('updateDetailArray', newDetail);
}
// 重置
function reset() {
  toolCode.value = '';
  endTime.value = '';
  aoCode.value = '';
  station.value = '';
  startTime.value = '';
  handleSearch();
}
onMounted(() => {
  handleSearch();
});
// 监听分页
watch([() => booleanStore.pageNum, () => booleanStore.pageSize], () => {
  if (booleanStore.num5 === 54) {
    pageNumber.value = booleanStore.pageNum;
    pageSize.value = booleanStore.pageSize;
    handleSearch();
  } else if (booleanStore.num5 === 55) {
    detailPageNumber.value = booleanStore.pageNum;
    detailPageSize.value = booleanStore.pageSize;
    startPlanByToolCode();
  }
});
watch(
  () => booleanStore.update,
  () => {
    if (booleanStore.num6 === 29) {
      handleSearch();
    } else if (booleanStore.num6 === 30) {
      startPlanByToolCode();
    }
  }
);
</script>

<template>
  <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
    <a-col :span="6">
      <div>
        <a-input
          v-model="aoCode"
          placeholder="AO编码"
          size="large"
          allow-clear
        />
      </div>
    </a-col>
    <a-col :span="6">
      <div>
        <a-input
          v-model="toolCode"
          placeholder="托盘"
          size="large"
          allow-clear
        />
      </div>
    </a-col>

    <a-col :span="6">
      <a-date-picker
        v-model="startTime"
        style="width: 100%"
        placeholder="要求开始时候"
        size="large"
        allow-clear
      />
    </a-col>
    <a-col :span="6">
      <a-date-picker
        v-model="endTime"
        style="width: 100%"
        placeholder="要求结束时间"
        size="large"
        allow-clear
      />
    </a-col>
    <a-col :span="6" style="margin-top: 10px">
      <div>
        <a-input
          v-model="station"
          placeholder="AO站位"
          size="large"
          allow-clear
        />
      </div>
    </a-col>
    <a-col :span="12" style="margin-top: 10px">
      <div>
        <a-button type="primary" size="large" @click="handleSearch"
          >查询</a-button
        >
        <a-button class="btn-reset" size="large" @click="reset">重置</a-button>
        <!-- <a-button type="primary" class="btn-reset" size="large">分配班组</a-button> -->
        <!-- <a-button type="primary" class="btn-reset" size="large"
          >下发任务</a-button> -->
      </div>
    </a-col>
  </a-row>
</template>

<style scoped>
.btn-group {
  float: right;
  margin-top: 15px;
}

.btn-reset {
  margin-left: 10px;
}
</style>
